<template>
	<my-header theme="border-left">
		<template #title>
			<span class="fw f-s-24">场景列表</span>
		</template>
		<template #handle>
			<el-button type="primary" @click="insertFn()" icon="Plus">新增</el-button>
		</template>
	</my-header>
	<div class="f1 h0 m-t-10 flex-col">
		<!-- <div class="p-10 system-page-background b-r-4">
			<my-form
				inline
				query
				label-width="70px"
				:model="queryParams"
				:formItem="[{ prop: 'title', label: '场景名称' }]"
				:searchFn="() => refTable.reload()"
			/>
		</div> -->
		<my-list-panel ref="refTable" :total="stateTable.total" :loadFn="loadData" :isAuto="false">
			<my-table
				:data="stateTable.list"
				:columns="stateTable.columns"
				@selection-change="(val) => (tableSelection = val)"
			>
				<template #default="{ row }">
					<my-button-text @click="arrangeFn(row)">编排</my-button-text>
					<my-button-text @click="updateFn(row)">修改</my-button-text>
					<my-button-text @click="deleteFn(row)">删除</my-button-text>
					<my-button-text @click="deleteFn(row)">预览</my-button-text>
				</template>
			</my-table>
		</my-list-panel>
	</div>

	<el-dialog :title="dialogTitle" v-model="dialog.open" width="500px" append-to-body @closed="resetForm(refDialogForm)">
		<my-form
			ref="refDialogForm"
			:model="dialog.form"
			label-width="90px"
			:disabled="['detail'].includes(dialog.name)"
			:formItem="[{ prop: 'title', label: '场景名称', required: true }]"
			:rules="rules"
		>
		</my-form>
		<template #footer>
			<el-button @click.prevent="dialog.open = false">取 消</el-button>
			<el-button type="primary" @click.prevent="dialogSubmitFn()">确 定</el-button>
		</template>
	</el-dialog>
</template>

<script setup>
/********************************************************** 场景表格增删改查 ***********************************************************/
import { addScene as add, removeScene as remove, editScene as edit, pageScene as page, uniqueScene } from '@/api/scene';

const props = defineProps({
		projectId: {
			required: true
		}
	}),
	rules = {
		title: [
			{ required: true, message: '不能为空', trigger: 'blur' },
			{ validator: validatorTitle, trigger: 'blur' }
		]
	},
	columns = [
		{
			label: '场景名称',
			prop: 'title'
		},
		{
			label: '发布时间',
			prop: 'configKey'
		},
		{
			label: '发布状态',
			prop: 'configValue'
		},
		{
			label: '操作',
			width: '200'
		}
	];

// 字段去重
function validatorTitle(rule, value, callback) {
	uniqueScene({ title: value, id: dialog.form.id })
		.then((res) => {
			if (!res.data) {
				return callback(new Error('场景名称重复请重新输入！'));
			} else {
				callback();
			}
		})
		.catch(() => {
			callback();
		});
}

const {
	queryParams,
	refTable,
	state: stateTable,
	tableSelection,
	refDialogForm,
	dialog,
	dialogTitle,
	loadData,
	insertFn,
	deleteFn,
	updateFn,
	dialogSubmitFn
} = pageMixin({
	columns,
	api: {
		page,
		remove,
		add,
		edit
	},
	dialogDefault: {
		title: '场景',
		form: {
			id: undefined,
			projectId: props.projectId
		}
	}
});

watch(
	() => props.projectId,
	(val) => {
		if (val) {
			queryParams.projectId = props.projectId;
			dialog.form.projectId = props.projectId;
			refTable.value.reload();
		}
	},
	{ immediate: true }
);

// 跳转编排页面
function arrangeFn(data) {
	// const url = $router.resolve({
	// 	name: '3DEdit',
	// 	params: { projectId: data.id }
	// });
	// window.open(url.href, '_blank');
	$router.push({
		name: '3DEdit',
		params: { projectId: data.id }
	});
}
</script>
